import React, { useEffect } from "react";
import AMapLoader from "@amap/amap-jsapi-loader";

export default function MapContainer() {
    useEffect(() => {
        let map = null;
        let marker = null;
        let infoWindow = null;

        // 加载地图 API
        AMapLoader.load({
            key: "bf95b990b03e99551217903ec5bae837", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [], // 需要使用的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
            // 创建地图实例
            map = new AMap.Map("map", {
                // 设置地图容器id
                viewMode: "3D", // 是否为3D地图模式
                zoom: 12, // 初始化地图级别
                center: [0, 0], // 初始化地图中心点位置
            });

            // 创建标记
            marker = new AMap.Marker({
                position: [0, 0],
            });
            // 在地图上添加标记
            marker.setMap(map);
            // 创建信息窗口
            infoWindow = new AMap.InfoWindow({
                content: "这里是信息窗口的内容",
            });
            // 监听标记的点击事件，当点击标记时打开信息窗口
            marker.on("click", function () {
                infoWindow.open(map, marker.getPosition());
            });



            // 创建定位控件
            AMap.plugin("AMap.Geolocation", function () {
                const geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true, // 是否使用高精度定位，默认为false
                    timeout: 100000, // 超过10秒后停止定位，默认为无穷大
                    maximumAge: 0, // 定位结果缓存0毫秒，默认值为0
                    convert: true, // 自动偏移坐标是否转换，默认为true
                    showButton: true, // 显示定位按钮，默认为true
                    buttonPosition: "LB", // 定位按钮停靠位置，默认为'LB'，左下角
                    buttonOffset: new AMap.Pixel(10, 20), // 定位按钮的偏移量，默认为Pixel(10, 20)
                    showMarker: true, // 定位成功后在定位到的位置显示点标记，默认为true
                    showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认为true
                    panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认为true
                    zoomToAccuracy: true, // 定位成功后将定位精度范围显示在地图上，默认为true
                });

                // 添加定位控件到地图中
                map.addControl(geolocation);

                // 获取当前位置
                geolocation.getCurrentPosition(function (status, result) {
                    if (status === "complete") {
                        const { position } = result;
                        map.setCenter(position); // Set the map center to current position
                        // 更新标记位置
                        marker.setPosition(position);
                        // 在地图上添加标记
                        marker.setMap(map);
                    } else {
                        console.error("Failed to get current location:", result);
                    }
                });

                var positionPicker = new positionPicker({
                    mode: 'dragMap', //拖拽地图模式，支持 dragMap（拖拽地图）和 dragMarker（拖拽 marker）
                    map: map
                });
                //设置拖拽事件和触摸事件的优先级
                AMap.event.addDomListener(positionPicker.marker, 'touchstart', function (e) {
                    AMap.event.stopPropagation(e);
                }, false);
                AMap.event.addDomListener(positionPicker.marker, 'mousedown', function (e) {
                    AMap.event.stopPropagation(e);
                }, false);
                positionPicker.on('success', function (positionResult) {
                    console.log(positionResult); //返回经纬度信息
                });
                positionPicker.start();

            });
        });

        return () => {
            // 销毁地图实例
            map && map.destroy();
        };
    }, []);

    return <div id="map" style={{ height: "50vh", width: '80vw', borderRadius: '10px', margin: '0 auto' }}></div>;
}